<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
    <div class="execution">
        <basic-container>
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="商品明细" name="first">
                        <avue-crud ref="crud"
                                   :page.sync="page"
                                   :data="tableData"
                                   :permission="permissionList"
                                   :table-loading="tableLoading"
                                   :option="tableOption"
                                   @on-load="getList"
                                   @search-change="searchChange"
                                   @refresh-change="refreshChange"
                                   @row-update="handleUpdate"
                                   @row-save="handleSave"
                                   @row-del="rowDel">
                            <template slot="menuRight">
                                <el-button size="small" @click="jumpToAdd">批量导出</el-button>
                            </template>
                        </avue-crud>
                    </el-tab-pane>
                    <el-tab-pane label="订单明细" name="second">
                        <avue-crud ref="crud"
                                   :page.sync="page"
                                   :data="tableData"
                                   :permission="permissionList"
                                   :table-loading="tableLoading"
                                   :option="tableOption2"
                                   @on-load="getList">
                            <template slot="menuRight">
                                <el-button size="small" @click="jumpToAdd">批量导出</el-button>
                            </template>
                        </avue-crud>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </basic-container>
    </div>
</template>
<script>
    import {
        fetchList,
        getObj,
        addObj,
        putObj,
        delObj
    } from '@/api/purchase/purchaseorder'
    import {
        tableOption
    } from '@/const/crud/scm/supplier/goodsdetail'
    import {
        tableOption2
    } from '@/const/crud/scm/supplier/orderdetail'
    export default {
        data() {
            return {

                activeName: 'first',
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption:tableOption,
                tableOption2:tableOption2
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params)).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                })
            },
            rowDel: function (row, index) {
                var _this = this
                this.$confirm('是否确认删除ID为' + row.id, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.id)
                }).then(data => {
                    _this.tableData.splice(index, 1)
                    _this.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    })
                    this.getList(this.page)
                }).catch(function (err) {
                })
            },
            /**
             * @title 数据更新
             * @param row 为当前的数据
             * @param index 为当前更新数据的行数
             * @param done 为表单关闭函数
             *
             **/
            handleUpdate: function (row, index, done) {
                putObj(row).then(data => {
                    this.tableData.splice(index, 1, Object.assign({}, row))
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    })
                    done()
                    this.getList(this.page)
                })
            },
            /**
             * @title 数据添加
             * @param row 为当前的数据
             * @param done 为表单关闭函数
             *
             **/
            handleSave: function (row, done) {
                addObj(row).then(data => {
                    this.tableData.push(Object.assign({}, row))
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    })
                    done()
                    this.getList(this.page)
                })
            },
            /**
             * 搜索回调
             */
            searchChange(form, done) {
                this.getList(this.page, form);
                done();
            },
            /**
             * 刷新回调
             */
            refreshChange(info) {
    this.getList(this.page, this.filterForm(info.searchForm));
}
        }
    };
</script>

<style lang="scss" scoped>
</style>
